<template>
	<!-- 邀请码页面 -->
	<view class="inviteBox">
		<!-- 	<view class="index_top_image" :style="{top : `${(2*menuButtonInfo.top + 4)}rpx`}">
			<image src="https://z3.ax1x.com/2021/08/12/fwT6JK.png" mode="widthFix"></image>
		</view>
		<view class="titleImg">
			<view class="titlebox">
				<p>吃面小程序</p>
				<p>内测中...</p>
			</view>
			<image class="imgTitle" src="../../static/xiaonian.png" mode="widthFix"></image>
		</view> -->
		<view class="imgBox">
			<image class="imgTitle" src="https://z3.ax1x.com/2021/09/25/4saGND.png" mode="widthFix"></image>
		</view>

		<view class="yzmaCode">
			<p class="yzmaTitle">请输入邀请码，参与内测</p>

			<view class="yzmaBox">



				<input id="male" @blur="blurTextarea" @focus="focusTextarea" :maxlength="yzm.lengths"
					v-model="yzm.value" class="messageBox" />

				<!-- <radio :id="male" :value="'选择1'" :checked="false"></radio> -->
				<!-- <label @click="ff_flick" for="male" class="boxBigest">Male</label> -->


				<view class="inputLeft">
					<view v-for="(item,index) in yzm.lengths" class="charitem"
						:style="{borderColor: ((index == yzm.value.length-1 && isHotts) || (isHotts && yzm.value.length == 0 && index == 0)) ? 'rgba(241, 2, 0,0.3)' : 'transparent'}"
						:key="index">
						{{yzm.value | ff_qz(index)}}
					</view>
				</view>

				<!-- </view> -->


			</view>

		</view>

		<view @click="accountinvite" class="buttons_"
			:style="{bottom: (tishiHeight) + 'rpx',background : isHot ? '#F10200' : '#c8cacc'}">立即参与
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 25
				},
				isHot: false,
				yzm: {
					lengths: 4,
					value: ""
				},
				tishiHeight: 120,
				hotCode: 0,
				isHotts: false
			}
		},
		onLoad() {
			
			this.init()
			},
	

		filters: {
			ff_qz(Val, index) {

				let newVal = Val.split('');
				return newVal[index] ? newVal[index] : "";
			}
		},
		methods: {
			blurTextarea(e) {
				this.isHotts = false;
				this.tishiHeight = 120;
			},
			focusTextarea(e) {
				this.isHotts = true;
				// debugger
				// 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
				this.tishiHeight = (e.detail.height * 1.3) <= 120 ? 120 : (e.detail.height * 1.3);
				console.log("this.tishiHeight===>", e.detail.height)
			},
			init() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// #endif
			},
			accountinvite() {
				// this.
				if (this.isHot) {
					this.$apis.accountInvite(
						 this.yzm.value
					).then(res => {
						
						if (res.code == 200) {
							// debugger
							uni.showToast({
								title: '参与成功',
							})
							setTimeout(() => {
								uni.switchTab({
									url: "../index/index"
								});
							}, 1500);
						} else {
							// debugger
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				} else {
					// debugger
					if(this.yzm.value.trim().length == 0){
						uni.showToast({
							title: '请输入邀请码',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: '邀请码不正确',
							icon: 'none'
						})
						this.yzm.value = ""
					
					}
					
				}

			}



		},
		watch: {
			"yzm.value"(vewVal, old) {
				if (vewVal.length == this.yzm.lengths) {
					// this.test()
					let isTure = /^[a-zA-Z\d]+$/.test(vewVal);
					console.log(isTure)
					if (isTure) {
						this.isHot = true;
					} else {
						this.isHot = false;
						// uni.showToast({
						// 	title: '邀请码不正确',
						// 	icon: 'none'
						// })
					}

				} else {
					this.isHot = false;
					// uni.showToast({
					// 	title:'邀请码不正确',
					// 	icon: 'none'
					// })
				}
				// debugger
			}
		}
	}
</script>

<style lang="scss">
	.inviteBox {
		width: 100%;
		height: 100vh;
		// background: #360;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-top: 1rpx solid transparent;
    overflow: hidden;
		.u-char-flex {
			transform: translateX(-18%);
		}

		.messageBox {
		    width: 300%;
		    text-indent: -999em;
		    margin-left: -100%;
		    height: 200rpx;
		    position: absolute;
		    z-index: 999;
		}

		.yzmaCode {
			margin-top: 80rpx;
		}

		.boxBigest {}

		.yzmaBox {
			width: 100%;
			display: flex;
			position: relative;
			justify-content: center;
		}

		.inputLeft {
			display: flex;
		}

		.yzmaTitle {
			font-size: 30rpx;
			font-family: Source Han Sans SC, Source Han Sans SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #606266;
			padding-bottom: 20rpx;
		}

		.index_top_image {
			position: absolute;
			top: 25px;
			width: 710rpx;

			/* background: red; */
			image {
				width: 230rpx;
			}
		}

		.buttons_ {
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #ffffff;
			width: 670rpx;
			height: 84rpx;
			opacity: 1;
			background: #c8cacc;
			border-radius: 12rpx;
			line-height: 84rpx;
			position: absolute;
			bottom: 120rpx;

		}

		.reds {}

		.titleImg {
			display: flex;
			justify-content: space-between;
			margin-top: 300rpx;
		}

		.titlebox {
			display: flex;
			flex-direction: column;
			justify-content: center;


			p {
				font-size: 65rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Bold;
				font-weight: 700;
				text-align: center;
				color: #040000;
				line-height: 42px;
				margin-bottom: 15rpx;
			}
		}

		.charitem {
			width: 96rpx !important;
			height: 128rpx !important;
			line-height: 115rpx !important;
			text-align: center;
			opacity: 1;
			background: #e1e3e5;
			border-radius: 12rpx !important;
			color: #000 !important;
			font-size: 64rpx;
			border: 4rpx solid transparent;
			margin-right: 20rpx;
			box-sizing: border-box;
		}

		.imgTitle {
			width: 196rpx;
			// height: 129px;
			// width: 750rpx;

			// transform: translateX(-20px);
		}

		.imgBox {
			width: 100%;
			margin-top: 300rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>
